{% extends "RihabBundle::layout.html.twig" %}
{% block titre %} Société{% endblock %}
{% block css %}
    {{parent()}}
{% endblock %}
{% block body %}
    <div class="main">
        <div class="row">
            <div id="form-type" class="col-md-12">

                <section class="tile color transparent-black">
                    <div class="tile-header">
                        <h1><strong>{% if id =='' %}Nouvelle {% else %}Modifier {% endif %}</strong> Société</h1>
                        <div class="controls">
                            <a class="refresh" href="#"><i class="fa fa-refresh"></i></a>
                            <a class="remove" href="#"><i class="fa fa-times"></i></a>
                        </div>
                    </div>
                    <div class="tile-body">
                        <form id="form-type-societe" action="{{path('stage_societe_new')}}" method="post" class="form-horizontal">
                            <div class="form-group">
                                <label class="col-sm-4 control-label" for="input01">Nom</label>
                                <div class="col-sm-8">
                                    {{form_widget(form.nom,{'attr':{'class':'form-control'}})}}{{form_widget(form._token)}}
                                    <input type="hidden" value="{{id}}" name="id" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label" for="input01">N°Telephone Fixe</label>
                                <div class="col-sm-8">
                                    {{form_widget(form.telFixe,{'attr':{'class':'form-control'}})}}
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label" for="input01">N°Telephone Fax</label>
                                <div class="col-sm-8">
                                    {{form_widget(form.telFax,{'attr':{'class':'form-control'}})}}
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label" for="input01">Départment</label>
                                <div class="col-sm-8">
                                    {{form_widget(form.department,{'attr':{'class':'form-control'}})}}
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label" for="input01">Adresse</label>
                                <div class="col-sm-8">
                                    {{form_widget(form.adresse,{'attr':{'class':'form-control'}})}}
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-12">
                                    <section class="tile color transparent-black">
                                        <div class="tile-header">
                                            <h1><strong>{% if idresp =='' %}Nouveau {% else %}Modifier {% endif %} </strong>Responsable</h1>
                                            <div class="controls">
                                                {% if idresp =='' %}<a href="javascript:addPersonnel()" >Ajouter Personnel(s)</a>{% endif %}
                                            </div>
                                        </div>
                                        <div class="tile-body nopadding">
                                           
                                            <table id="enc" class="table" >
                                                <thead>
                                                    <tr>
                                                        <th >Nom</th>
                                                        <th >Prénom</th>
                                                        <th >Fonction</th>
                                                        <th >Login</th>
                                                        <th >E-mail</th>
                                                        <th >Mot de passe</th>
                                                        <th >Confirmer le mot de passe</th>
                                                    </tr>
                                                </thead>
                                                {% if idresp =='' %}<script> javascript:addPersonnel();</script>{% endif %}
                                                <tbody id="list-encadreur" data-prototype="{% filter escape %}{% include 'StageBundle:Societe:form_encadreur.html.twig' with {'form': form.encadreurs.vars.prototype} %}{% endfilter %}">
                                                
                                                </tbody>
                                                
                                                
                                            </table>
                                        </div>
                                    </section>
                                </div>
                            </div>
                            <div class="form-group form-footer">
                                <div class="col-sm-offset-4 col-sm-8">
                                    <button class="btn btn-primary" type="submit" >Enregisrer</button>
                                    <button class="btn btn-default" type="reset">Effacer</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </section>
            </div>
        </div>
    </div>
{% endblock %}
{% block js %}
    {{parent()}}
    <script src="/js/jquery.validate.js"></script>
    <script>
        index = 0
        function addPersonnel() {
            var prototype = $('#list-encadreur').attr('data-prototype')
            prototype = prototype.replace(/__name__/g, index)
            $('#list-encadreur').append(prototype)
            index++
        }
        $('#form-type-societe').validate({
            rules: {
                "stage_stagebundle_societe[nom]": {
                    required: true,
                    minlength: 3,
                    maxlength: 50
                },
                "stage_stagebundle_societe[telFixe]": {
                    required: true,
                    number: true,
                    minlength: 8,
                    maxlength: 8
                },
                "stage_stagebundle_societe[telFax]": {
                    required: true,
                    number: true,
                    minlength: 8,
                    maxlength: 8
                },
                "stage_stagebundle_societe[department]": {
                    required: true,
                    minlength: 3,
                    maxlength: 50
                },
                "stage_stagebundle_societe[adresse]": {
                    required: true,
                    minlength: 10,
                    maxlength: 255
                }

            },
            messages: {
                "stage_stagebundle_societe[nom]": {
                    required: "Le 'NOM' n'est pas valide",
                    minlength: "Longueur minimale du 'NOM' incorrecte",
                    maxlength: "Longueur maximale du 'NOM' incorrecte"
                },
                "stage_stagebundle_societe[telFixe]": {
                    number: "Le 'N°TELEPHONE FIXE' est numerique",
                    required: "Le 'N°TELEPHONE FIXE' n'est pas valide",
                    minlength: "Longueur minimale du 'N°TELEPHONE FIXE' incorrecte",
                    maxlength: "Longueur maximale du 'N°TELEPHONE FIXE' incorrecte"
                },
                "stage_stagebundle_societe[telFax]": {
                    number: "Le 'N°TELEPHONE FAX' est numerique",
                    required: "Le 'N°TELEPHONE FAX' n'est pas valide",
                    minlength: "Longueur minimale du 'N°TELEPHONE FAX' incorrecte",
                    maxlength: "Longueur maximale du 'N°TELEPHONE FAX' incorrecte"
                },
                "stage_stagebundle_societe[department]": {
                   required: "Le 'DEPARTEMENT' n'est pas valide",
                    minlength: "Longueur minimale du 'DEPARTEMENT' incorrecte",
                    maxlength: "Longueur maximale du 'DEPARTEMENT' incorrecte"
                },
                "stage_stagebundle_societe[adresse]": {
                    required: "Le 'ADRESSE' n'est pas valide",
                    minlength: "Longueur minimale du 'ADRESSE' incorrecte",
                    maxlength: "Longueur maximale du 'ADRESSE' incorrecte"
                }

            }
        })
       
        
        $('#etudiant').chosen({disable_search_threshold: 10});
        var idsEtudiant = [];
        $(".chosen-choices input").autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: "{{path('stage_get_etidiant')}}",
                    dataType: "json",
                    data: {
                        featureClass: "P",
                        style: "full",
                        maxRows: 12,
                        name_startsWith: request.term,
                        ids: JSON.stringify(idsEtudiant),
                    },
                    beforeSend: function() {
                        $('ul.chosen-results').empty();
                        idsEtudiant = []
                        $('#etudiant option').each(function() {
                            idsEtudiant[idsEtudiant.length] = $(this).val()
                        })
                        alert(idsEtudiant)

                    },
                    success: function(data) {
                        response($.map(data, function(item) {
                            $('#etudiant').append('<option value="' + item.id + '">' + item.name + '</option>');
                            $("#etudiant").trigger("chosen:updated");

                        }));
                    }

                });
            },
            minLength: 2
        });
        $('#stage_stagebundle_stage_dateDebut').datetimepicker({
            pickTime: false,
            language: "fr-FR",
            onClose: function(selectedDate) {
                $("#stage_stagebundle_stage_dateFin").datetimepicker("option", "minDate", selectedDate);
            }
        })
        $('#stage_stagebundle_stage_dateFin').datetimepicker({
            pickTime: false,
            language: "fr-FR",
            onClose: function(selectedDate) {
                $("#stage_stagebundle_stage_dateDebut").datetimepicker("option", "maxDate", selectedDate);
            }
        })
        resetForm()
        
        function resetForm() {
            $('#form-type-stage input').val('')
        }
    </script>
{% endblock %}